<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<section>
    <h4>File Blob ArrayBuffer FormData FileReader</h4>
    <ul>
        <li>File Blob ArrayBuffer 是数据</li>
        <li>FileReader            是工具</li>
        <li>FormData              是数据应用场景</li>
    </ul>
    <ul>
        <li>File 继承 Blob</li>
    </ul>
    <ul>
        <li>readAsArrayBuffer  将 Blob 或 File 读取为 ArrayBuffer 对象</li>
        <li>readAsBinaryString 将 Blob 或 File 读取为文件原始二进制格式</li>
        <li>「Blob」 类型的对象表示不可变的类似文件对象的原始数据。Blob 表示的不一定是 JavaScript 原生格式的数据。File 接口基于 Blob，继承了Blob 功能并将其扩展为支持用户系统上的文件。</li>
        <li>ArrayBuffer 对象用来表示 「通用的、固定长度的」 原始二进制数据缓冲区。「ArrayBuffer 不能直接操作，而是要通过类型数组对象 或 DataView 对象来操作」 ，它们会将缓冲区中的数据表示为特定的格式，并通过这些格式来读写缓冲区的内容</li>
        <li>Uint8Array 数组类型表示一个 8 位无符号整型数组(相当于字节数组)，创建时内容被初始化为 0。创建完后，可以以「对象的方式或使用数组下标索引的方式」引用数组中的元素。</li>
        <li>DataView 视图是一个可以从二进制 ArrayBuffer 对象中读写多种数值类型的底层接口，使用它时，不用考虑不同平台的字节序问题。</li>
        <li>使用 FileReader 的 readAsArrayBuffer() 方法，可以把 Blob 对象转换为 ArrayBuffer 对象；</li>
        <li>使用 Blob 构造函数，如 new Blob([new Uint8Array(data]);，可以把 ArrayBuffer 对象转换为 Blob 对象</li>
    </ul>
    <ul>
        <li>charAt() 是按位置返回字符</li>
        <li>charCodeAt() 是按位置返回对应字符的 Unicode 编码</li>
        <li>fromCharCode() 则是根据字符的 Unicode 编码返回对应的字符</li>
    </ul>
    <ul>
        <li>Unicode：通常两个字节，可以表示中文，多一倍存储空间</li>
        <li>ASCII：1个字节，无法表示中文</li>
    </ul>
</section>
<script>
    // Blob + URL使用场景 文件下载
    const data = ''; // 获取后端的数据
    const contentType = ''; // 获取后端的数据类型
    const blob = new Blob(data, {
        type: contentType
    })
    const url = window.URL.createObjectURL(blob)
    const a = document.createElement('a')
    a.href = url
    a.click()
    window.URL.revokeObjectURL(url)

    // FormData 使用场景 文件上传（以二进制的方式）
    const file = {} // 用户上传的文件对象
    const formData = new FormData()
    formData.append('file', file, file.name)

    // FileReader 使用场景 文件上传，它可以将文件读取为以下四种形式
    const file = {} // 用户上传的文件对象
    let reader = new FileReader();
    reader.readAsDataURL(file)
    reader.readAsArrayBuffer(file)
    reader.readAsBinaryString(file)
    reader.readAsText(file)
    reader.onload = function (e) {
        console.log('result', e.target.result);
    }

    // File file通常来说都是从选择而来，不是主动创建
    const file = new File([], 'test.txt');
    console.log(file)
</script>
</body>
</html>
